<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时钟</title>
    <style type="text/css">
        .demo
        {
            width: 150px;
            height: 150px;
            border-radius: 50%;

            position: absolute;
            top: 100px;
            left: 100px;

            background: #3d4f6c;
            border: 10px solid #bf8c79;
            transform: translate3d(50px, 30px, 20px);
        }
        .demo ul
        {
            position: relative;
            left: 0;
            top: 0;
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        .demo ul li
        {
            position: absolute;
            top: 0px;
            left: 75px;
            z-index: 99;

            width: 2px;
            height: 10px;
            background: #000;

            transform-origin: 50% 750%;
        }
        /* 表盘刻度 */
        .demo ul li:nth-of-type(2)
        {
            transform: rotate(30deg);
        }
        .demo ul li:nth-of-type(3)
        {
            transform: rotate(60deg);
        }
        .demo ul li:nth-of-type(4)
        {
            transform: rotate(90deg);
        }
        .demo ul li:nth-of-type(5)
        {
            transform: rotate(120deg);
        }
        .demo ul li:nth-of-type(6)
        {
            transform: rotate(150deg);
        }
        .demo ul li:nth-of-type(7)
        {
            transform: rotate(180deg);
        }
        .demo ul li:nth-of-type(8)
        {
            transform: rotate(210deg);
        }
        .demo ul li:nth-of-type(9)
        {
            transform: rotate(240deg);
        }
        .demo ul li:nth-of-type(10)
        {
            transform: rotate(270deg);
        }
        .demo ul li:nth-of-type(11)
        {
            transform: rotate(300deg);
        }
        .demo ul li:nth-of-type(12)
        {
            transform: rotate(330deg);
        }
        .demo ul li:nth-of-type(1)
        {
            transform: rotate(3600deg);
        }
        
        .demo ul li:nth-of-type(1) span, .demo ul li:nth-of-type(2) span, .demo ul li:nth-of-type(3) span, .demo ul li:nth-of-type(4) span, .demo ul li:nth-of-type(5) span, .demo ul li:nth-of-type(6) span, .demo ul li:nth-of-type(7) span, .demo ul li:nth-of-type(8) span, .demo ul li:nth-of-type(9) span, .demo ul li:nth-of-type(10) span, .demo ul li:nth-of-type(11) span, .demo ul li:nth-of-type(12) span
        {
            position: absolute;
            left: -8px;
            top: 6px;
            transform-origin: center;
        }
        .demo ul li:nth-of-type(2) span
        {
            transform: rotate(-30deg);
        }
        .demo ul li:nth-of-type(3) span
        {
            transform: rotate(-60deg);
        }
        .demo ul li:nth-of-type(4) span
        {
            transform: rotate(-90deg);
        }
        .demo ul li:nth-of-type(5) span
        {
            transform: rotate(-120deg);
        }
        .demo ul li:nth-of-type(6) span
        {
            transform: rotate(-150deg);
        }
        .demo ul li:nth-of-type(7) span
        {
            transform: rotate(-180deg);
            left: -4px;
        }
        .demo ul li:nth-of-type(8) span
        {
            transform: rotate(-210deg);
        }
        .demo ul li:nth-of-type(9) span
        {
            transform: rotate(-240deg);
            left: -7px;
        }
        .demo ul li:nth-of-type(10) span
        {
            transform: rotate(-270deg);
            left: -4px;
        }
        .demo ul li:nth-of-type(11) span
        {
            transform: rotate(-300deg);
        }
        .demo ul li:nth-of-type(12) span
        {
            transform: rotate(-330deg);
        }

        /*中心点*/
        .center-disc
        {
            position: absolute;
            left: 75px;
            top: 75px;

            width: 2px;
            height: 2px;
            background: #bf8c79;

            border-radius: 50%;
        }

        /* 时针 */
        .needle div:nth-of-type(1)
        {
            position: absolute;
            left: 75px;
            top: 61px;

            width: 2px;
            height: 15px;
            background: #f00;
            border-radius: 1px;
            transform: rotate(0deg);
            transform-origin: 50% 100%;
            animation: rotatehour 36000s linear infinite;
        }
        @keyframes rotatehour
        {
            to
            {
                transform: rotate(360deg);
            }
        }
        /* 分针 */
        .needle div:nth-of-type(2)
        {
            position: absolute;
            left: 75px;
            top: 51px;

            width: 2px;
            height: 25px;
            background: #0f0;
            border-radius: 1px;
            transform: rotate(0deg);
            transform-origin: 50% 100%;
            animation: rotatemin 600s linear infinite;
        }
        @keyframes rotatemin
        {
            to
            {
                transform: rotate(360deg);
            }
        }
        /* 秒针 */
        .needle div:nth-of-type(3)
        {
            position: absolute;
            left: 75px;
            top: 43px;

            width: 2px;
            height: 33px;
            background: #00f;
            border-radius: 1px;
            transform: rotate(0deg);
            transform-origin: 50% 100%;
            animation: rotatesec 10s linear infinite;
        }
        @keyframes rotatesec
        {
            to
            {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="demo">
        <div class="center-disc"></div>
        <div class="needle">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <ul>
            <li><span>12</span></li>
            <li><span>1</span></li>
            <li><span>2</span></li>
            <li><span>3</span></li>
            <li><span>4</span></li>
            <li><span>5</span></li>
            <li><span>6</span></li>
            <li><span>7</span></li>
            <li><span>8</span></li>
            <li><span>9</span></li>
            <li><span>10</span></li>
            <li><span>11</span></li>
        </ul>
    </div>
</body>
</html>